<template>
  <div class="bg4"></div>
  <section class="bg2">
    <div class="bg3">
      <div class="jibenxinxi">基本信息</div>
      <div class="hengxian"></div>
      <div class="fangxing">
        房型名称：<el-input
          v-model="text"
          maxlength="20"
          placeholder="请输入房型名称"
          class="fangxingming"
          show-word-limit
          type="text"
        />
      </div>
      <div class="mt-4">
        售价：
        <el-input v-model="input2" class="shoujiakuang" placeholder="￥0.00">
          <template #append>元</template>
        </el-input>
      </div>
      <div class="mt-5">
        房型面积：
        <el-input v-model="input3" class="shoujiakuang" placeholder="0">
          <template #append>㎡</template>
        </el-input>
      </div>
      <div class="mt-5">
        入住人数：
        <el-input v-model="input4" class="shoujiakuang" placeholder="2">
          <template #append>人</template>
        </el-input>
      </div>
      <div class="zhanshixinxi">展示信息</div>
      <div class="hengxian"></div>
      <div class="fangxingtu">
        房型图片：<el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <div class="ziti1">支持jpg .jpeg .bmp .png格式,大小不超过2M</div>
      </div>
      <div class="fangxing">
        房型介绍：<el-input
          v-model="text"
          maxlength="20"
          placeholder="输入内容不超过300字"
          class="fangxingjiesao"
          show-word-limit
          type="text"/>
      </div>
      <div class="jiachuang">
        可否加床：<el-checkbox v-model="checked1">不加床</el-checkbox>
                 <el-checkbox v-model="checked2">加床</el-checkbox>
      </div>
      <div class="hanzao">
        是否含早：<el-checkbox v-model="checked3">不含早</el-checkbox>
                 <el-checkbox v-model="checked4">含早</el-checkbox>
      </div>
      <div class="hengxian"></div>
      <div>
        <el-button class="fanhui">返回</el-button>
        <el-button  class="baocun" type="primary">保存</el-button>
      </div>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const text = ref("");
const input2 = ref("");
const input3 = ref("");
const input4 = ref("");
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const checked2 = ref(false)
const checked1 = ref(true)
const checked4 = ref(false)
const checked3 = ref(true)
import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>
<style lang="less" scoped>

.bg2 {
  background-color: rgb(242, 242, 242);
  width: 100%;
  height: 1200px;
}
.bg3 {
  width: 95%;
  height: 1150px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
}
.bg4 {
  width: 100%;
  height: 20px;
  background-color: rgb(242, 242, 242);
}
.hengxian {
  border-bottom: 2px solid rgb(224, 224, 224);
  width: 95%;
  margin: 0 auto;
}
.jibenxinxi {
  padding: 30px;
}
.fangxingming {
  width: 450px;
}
.fangxing {
  margin: 50px;
}
.shoujiakuang {
  width: 450px;
}
.mt-4 {
  margin-left: 75px;
  margin-bottom: 50px;
}
.mt-5 {
  margin-left: 43px;
  margin-bottom: 50px;
}
.zhanshixinxi {
  margin-left: 50px;
  margin-bottom: 30px;
}
.fangxingtu {
  margin:50px;
  position: relative;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width:90px;
  height: 90px;
  text-align: center;
  background-color: rgb(244, 244, 244);
  margin-left: 90px;
  position:absolute;
  left: 1px;
}
.ziti1{
    font-size: 0.5rem;
    color: #8c939d;
    margin-top: 45px;
}
.fangxingjiesao{
    width: 650px;
    height: 100px;
}
.jiachuang{
    margin-left: 50px;
}
.hanzao{
    margin-left: 50px;
    margin-bottom: 30px;
}
.fanhui{
    margin-left: 550px;
    margin-top: 80px;
}
.baocun{
    margin-top: 80px;
}
</style>
